<template>
  <div class="hello">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="时间">
        <el-date-picker
          v-model="timeArr"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="被校表出厂编号" >
        <el-select v-model="value"  @click.native ="onClick" placeholder="被校表出厂编号" clearable filterable @blur="selectBlur"
            @clear="selectClear" @change="selectChange">
          <el-option   v-for="item in options" :value="item.data1005" :label="item.data1005" :key="item.data1005"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="onSubmitPlom">查询</el-button>
      </el-form-item>
    </el-form>


    <el-table :data="fileData" :border="true" >
      <el-table-column  fixed prop="data1001"  label="标准表编号" > </el-table-column>
      <el-table-column  fixed prop="data1005"  label="被校表出厂编号" > </el-table-column>
      <el-table-column  fixed prop="startTime"  label="上传时间" > </el-table-column>
      
      <el-table-column  fixed="right" label="操作"   >
        <template slot-scope="scope" >
          <el-button @click="dialogFormVisibleClick(scope.row)" type="text" size="small" >导出</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 
      配置分页信息 :
      handleSizeChange:改变每页条数的事件
      handleCurrentChange:下一页
      pageNumber:当前页数
      pageSize:每页条数
      total:总条数
    -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageNumber" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>


    <!-- 导出对话框 -->
    <el-dialog title="新增内容" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form :model="dialogForm" ref="dialogForm" :rules="rules">
        <!-- <el-form-item label="证书编号" :label-width="formLabelWidth" prop="data1161">
          <el-input v-model="dialogForm.data1161" autocomplete="off" placeholder="请输入证书编号" :disabled="disabled">
          </el-input>
        </el-form-item> -->

        <el-form-item label="证书编号" :label-width="formLabelWidth" prop="data1161">
          <el-input v-model="dialogForm.data1161" autocomplete="off" placeholder="请输入证书编号">
          </el-input>
        </el-form-item>

        <el-form-item label="检定校准日期" :label-width="formLabelWidth">
          <div class="block">
            <span class="demonstration"></span> 
            <el-date-picker v-model=" dialogForm.data1162" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="有效日期" :label-width="formLabelWidth">
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker v-model="dialogForm.data1163" type="date" placeholder="选择日期"></el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="downLoadFile('dialogForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    var validatePass = (rule, value, callback) => {
      const emailRegex = /^\d+$/;
      if (!value) {
        callback(new Error('请输入证书编号！'));
      }
      setTimeout(() => {
        callback();
      }, 1000);
      if(!emailRegex.test(this.dialogForm.data1161)){
        callback(new Error('请检查输入的内容(纯数字)！'));
      }
    };
    return {
      timeArr:null,
      options:[],
      //表格数据
      fileData:[],
      pageNumber: 1, //当前页数
      pageSize: 5, //每页条数
      total: 0, //总条数
      value:"", //查询 被校表编号 绑定对象
      dialogFormVisible: false,//导入弹出框
      //弹出框 form表单
      dialogForm: {},
      formLabelWidth: '120px',
      disabled: false,  //证书编号是否可以编辑
      rules:{
        data1161: [
          { validator: validatePass, trigger: 'blur' }
        ],
      }
    }
  },


  mounted: function() {
    this.onSubmit();
	},

  methods: {
    //selectBlur、selectClear、selectChange用于下拉框可以输入 也可搜索
    selectBlur(e) {
      // 意见类型
      if (e.target.value !== '') {
        this.value = e.target.value;
        this.$forceUpdate()   // 强制更新
      }
    },
    selectClear() {
      this.value = ''
      this.$forceUpdate()
    },
    selectChange(val) {
      this.value = val
      this.$forceUpdate()
    },
    

    //下拉列表单击查询事件
    onClick(){
      var that = this;
      that.axios({
        url: "/excelImport/getAllData1005",
        method: "GET",
        
      }).then(function(res) {
        that.options = res.data;
      })
    },

    //解决分页查询条件下一页问题
    onSubmitPlom(){
      this.pageNumber = 1;
      this.onSubmit();
    },

    //查询表单提交 + 初始化表格
    onSubmit() {
      var that = this;
      that.axios({
        url: "/excelImport/getAllDigitalElasticElement",
        method: "GET",
        params: {
          pageNumber: that.pageNumber,
          pageSize: that.pageSize,
          selectStartTime: that.timeArr ? that.timeArr[0].toLocaleString() : '',
          selectEndTime: that.timeArr ? that.timeArr[1].toLocaleString() : '',
          data1005 : that.value
        }
      }).then(function(res) {
        that.fileData = res.data.records;
        that.total = res.data.total;
      })
    },

    //改变每页条数的事件
    handleSizeChange: function(val) {
      this.pageSize = val;
      this.onSubmit();
    },
    //下一页
    handleCurrentChange: function(val) {
      this.pageNumber = val;
      this.onSubmit();
    },

    //弹出框控制
    dialogFormVisibleClick(row){
      this.dialogFormVisible = true;
        this.$nextTick(()=>{
          this.$refs.dialogForm.resetFields();
          this.dialogForm = {
            id:row.id,
            data1161 : row.data1161 || '00000000000',
            data1162 : row.data1162 || '',
            data1163 : row.data1163 || '',
          }
          if(this.dialogForm.data1161 != null && this.dialogForm.data1161 != ""){
            this.disabled = true;
          }else{
            this.disabled = false;
          }
        });
    },

    //关闭后清空弹出框内容
    handleClose(){
      this.dialogFormVisible = false;
    },

    //文件导出 添加弹出框
    downLoadFile(formName) {
      let that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          if(
            this.dialogForm.id != null && this.dialogForm.id != "" &&
            this.dialogForm.data1161 != null && this.dialogForm.data1161 != "" &&
            this.dialogForm.data1162 != null && this.dialogForm.data1162 != "" &&
            this.dialogForm.data1163 != null && this.dialogForm.data1163 != ""
          ){
            that.axios({
              method: 'POST',
              url: '/excelExport/excelElasticExport',
              params: {
                id: this.dialogForm.id,
                data1161:this.dialogForm.data1161,
                data1162:this.dialogForm.data1162 ? this.dialogForm.data1162.toLocaleString() : '',
                data1163:this.dialogForm.data1163 ? this.dialogForm.data1163.toLocaleString() : ''
              },
              headers: {
                  'Content-Type': 'application/json;charset=UTF-8'
              },
              responseType: 'blob'// 表明返回服务器返回的数据类型
            }).then(function (res) {
                if(res.status == 200){
                  that.dialogFormVisible = false;
                  that.$message.success("文件成功导出到 D:/excel ！！");
                }
            })
          }else{
            that.dialogFormVisible = false;
            this.dialogForm = {};
            this.$alert('文件导出错误,请检查新增内容是否填写完整！', '提示信息', {
              confirmButtonText: '确定'
            });
          }
        } else {
          that.$message.error("请检查输入内容！");
          return ;
        }
      });
    },

  }
}
</script>